<template>
<div>
  <input type="text" v-model="title">
  <button @click="add">添加</button>
  <p>{{list}}</p>

   <hi>孩子</hi>
    <p>{{message}}</p>
    <p>{{number}}</p>
</div>
</template>

<script>
export default {
  name: "Child",
  data() {
    return {
      title:'',
      number: 10
    }
  },
  props:['list','message'],
  methods:{
    add: function () {
      this.$emit('addFromChild',this.title)

    }
  },
  created() {
    console.log('Child:  created')
  },
  mounted() {
    console.log('Child:  mounted')
  },
  beforeUpdate() {
    console.log('Child:  beforeUpdate')
  },
  updated() {
     console.log('Child:   updated')
  },
  beforeDestroy() {
     console.log('Child:  beforeDestroy')
  }
}
</script>

<style scoped>

</style>
